import React, { Component } from 'react';

class Index extends Component {
  state = {
    isSel: false
  }
  // handleClick(e) {
    // const el = e.target;
    // if (el.style.transform === 'rotateZ(180deg)') {
    //   el.style.transform = 'rotateZ(0)'
    //   el.parentNode.nextElementSibling.style.display = 'none'
    // } else {
    //   el.style.transform = 'rotateZ(180deg)'
    //   el.parentNode.nextElementSibling.style.display = 'flex'
    // }
  // }
  render() {
    const { v } = this.props
    const { isSel } = this.state
    return (
      <li key={v.id}>
        <div className="top">
          <p>
            {
              v.titles.map((v, i) => {
                return <b className={i === 0 ? 'active' : ''} key={i}>{v}</b>
              })
            }
          </p>
          <i className="iconfont icon-xiajiantou"
            style={{ transform: isSel ? 'rotateZ(180deg)' : 'rotateZ(0)'  }}
            onClick={(e) => this.setState({ isSel: !isSel }) }
          ></i>
        </div>
        <div className="sel"
          style={{ display: isSel ? 'flex': 'none' }}
        >
          {
            v.sel.map((v, i) => {
              return <span key={i}>{v}</span>
            })
          }
        </div>
      </li>
    );
  }
}

export default Index;
